Custom toolbar can be added to WebTextEditor using XML File. The XML file should implement the following format:
- The root node is WebTextEditorToolBarCollection
- To represent each toolbar, create WebTextEditorToolBar and add it to the root node. WebTextEditorToolBar could have Name, Text, and Category attributes. The predefined Category values are Standard, Formatting, HTML, FloatingTop, FloatingBottom, Preview, and Custom. If you add custom toolbar, you should use Custom category.
- Add ToolCommands node inside each toolbar node
- To represent each command, add WebTextEditorToolCommand to ToolCommands node. The attributes of commands are:
- Name: specifies the unique name of the command
- Text: specifies the text that will be displayed in the command
- DisplayMode: specifies the display mode of the command. Three options are available for this attributes: Text, Image, and TextAndImage.
- Image: specifies the image path that will be displayed in the command
- Type: specifies the type of the command. There are various types supported in toolbar: Button, ToggleButton, SplitButton, DropDownButton, and Separator. Note that unique ID must be assigned to Separator-typed command.
o ToggleGroupName: specifies the name of a toggle group. If multiple commands are included in the same toggle group, the same ToggleGroupName must be assigned to them.
- If the command type is SplitButton or DropDownButton, items can be added to the command. Add Items node inside the command node.
- To represent each item, add WebTextEditorToolItem to Items node. The attributes of an item are:
- Name: specifies the unique name of the item.
- Text: specifies the text that will be displayed in the item.
- Image: specifies the image that will be displayed in the item.
Example:
<WebTextEditorToolBarCollection>
<WebTextEditorToolBar Name="WebTextEditor1_tbCustom" Category="Custom" Text="Custom 1">
<ToolCommands>
<WebTextEditorToolCommand Name="cmdChangeCase" Text="Change Case" CommandType="ChangeCase" DisplayMode="TextAndImage" Image=" tb_changecase.gif" Type="SplitButton">
<Items>
<WebTextEditorToolItem Name="itemUpperCase" Text="UPPER CASE" Image="tb_uppercase.gif" />
<WebTextEditorToolItem Name="itemLowerCase" Text="lower case" Image=" tb_lowercase.gif" />
</Items>
</WebTextEditorToolCommand>
<WebTextEditorToolCommand Name="cmdEmot" Type="ToggleButton" Text="Emot" DisplayMode="Image" Image="smiley.gif">
<Items />
</WebTextEditorToolCommand>
</ToolCommands>
</WebTextEditorToolBar>
</WebTextEditorToolBarCollection>